<template>
	<view> 
	<web-view src="../../hybrid/html/index.html"></web-view>
	<!-- <image src="../../static/load.svg" mode="" style="
    width: 100%;
    height: 600px;
"></image> -->
	<!-- <view style="background-image: url(../../static/qidong.gif);    background-size: 100%;" :style="[{'height':height+'px','width':'100%'}]"> -->
<!-- <image src="../../static/qidong.gif" mode="aspectFit" style="width: 100%;height: 800px" ></image> -->
		<!-- <view :class="[toggleDelay?'animation-fade':'hidden']" class="flex solid-bottom padding justify-center" style="height: 120px;margin-top: 30%;">
			<image :src="myconfig.logo" mode="aspectFit" style="width: 120px;height: 120px;"></image>

		</view>
		<view class="flex solid-bottom padding justify-center" style="margin-top: 10%;">  
			<view :class="[toggleDelay?'animation-fade':'hidden']" :style="[{animationDelay: '1s'}]" class="text-center uni-h2">{{myconfig.name}}</view>
		</view> 
		<view class="padding-sm" style="margin-top: 30%;">
			<view class="flex flex-wrap justify-around">
				<view :class="[toggleDelay?'animation-slide-top':'hidden']" :style="[{animationDelay: (index + 1)*0.1 + 's'}]"
				 v-for="(item,index) in named" :key="index">
					<text class="boot">{{item}}</text>

				</view>

			</view>
		</view> -->

		<!--  <view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 默认效果
			</view>
		</view>
		<view class="padding-sm">
			<view class="flex flex-wrap justify-around">
				<button class="cu-btn margin-sm basis-sm shadow" :class="['bg-' + item.color,animation==item.name?'animation-' +item.name :'']"
				 @tap="Toggle" :data-class="item.name" v-for="(item,index) in list" :key="index">{{item.name}}</button>
			</view>
		</view>
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 反向动画
			</view>
		</view>

		<view class="padding-sm">
			<view class="flex flex-wrap justify-around">
				<button class="cu-btn animation-reverse margin-sm basis-sm shadow" :class="['bg-' + item.color,animation==item.name+'s'?'animation-' +item.name:'']"
				 @tap="Toggle" :data-class="item.name+'s'" v-for="(item,index) in list" :key="index">{{item.name}}</button>
			</view>
		</view> -->
		<!-- <view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 延迟执行
			</view>
			<view class="action">
				<button class="cu-btn bg-cyan shadow" @tap="ToggleDelay">开始执行</button>
			</view>
		</view> -->


		<!-- <view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> Gif动画
			</view>
		</view>
		<view class="margin radius bg-gradual-yellow shadow-blur">
			<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100upx"></image>
		</view>
		<view class="margin flex">
			<view class="bg-black flex-sub margin-right radius shadow-lg">
				<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
			</view>
			<view class="bg-white flex-sub radius shadow-lg">
				<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
			</view>
		</view>
		<view class="margin flex">
			<view class="bg-gradual-blue flex-sub margin-right radius shadow-lg">
				<image src="https://image.weilanwl.com/gif/rhomb-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
			</view>
			<view class="bg-white flex-sub radius shadow-lg">
				<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
			</view>
		</view>
		<view class="margin flex">
			<view class="bg-white flex-sub margin-right radius shadow-lg">
				<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240upx"></image>
			</view>
			<view class="bg-black flex-sub radius shadow-lg">
				<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				height:800,
				animation: '',
				list: [{
						name: 'fade',
						color: 'red'
					},
					{
						name: 'scale-up',
						color: 'orange'
					},
					{
						name: 'scale-down',
						color: 'olive'
					},
					{
						name: 'slide-top',
						color: 'yellow'
					}, {
						name: 'slide-bottom',
						color: 'cyan'
					},
					{
						name: 'slide-left',
						color: 'blue'
					},
					{
						name: 'slide-right',
						color: 'purple'
					},
					{
						name: 'shake',
						color: 'mauve'
					}
				],
				toggleDelay: false

			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			},
			named() {
				let a = 'Welcome,to,simple,contracts';
				return a.split(',');
			}
		},
		methods: {
			...mapActions(['myConfig', 'SAVE_HOME_PRODUCTS']),
			init() {
				uni.getSystemInfo({
					success(res) {
						console.log(res.windowHeight)
						this.height=res.windowHeight;
					},
				})
				this.myConfig().then(() => {

					this.ToggleDelay();
				})

			},
			Toggle(e) {
				var anmiaton = e.currentTarget.dataset.class;
				this.animation = anmiaton;
				setTimeout(() => {
					this.animation = '';
				}, 3000)
			},
			ToggleDelay() {
				this.toggleDelay = true;
				setTimeout(() => {
					console.log(33)
					// this.toggleDelay = false
					//首页
					uni.switchTab({
						url: '/pages/index/index'
					}) 
				}, 3000)
			}
		},
		onShow() {
			this.init()
		}
	}
</script>

<style>
	.hidden {
		display: none;
	}

	image[class*="gif-"] {
		border-radius: 6upx;
		display: block;
	}

	.tt {
		fill: #eee;
		font-size: 80px;
	}

	.text1 {
		stroke: #f00;
		animation: slide1 5s linear infinite;
	}

	@keyframes slide1 {
		0% {
			stroke-dashoffset: -0;
		}

		100% {
			stroke-dashoffset: 125;
		}
	}

	.text2 {
		stroke: #f33;
		animation: slide2 5s linear infinite;
	}

	@keyframes slide2 {
		0% {
			stroke-dashoffset: -35;
		}

		100% {
			stroke-dashoffset: 160;
		}
	}

	.text3 {
		stroke: #f66;
		animation: slide3 5s linear infinite;
	}

	@keyframes slide3 {
		0% {
			stroke-dashoffset: -70;
		}

		100% {
			stroke-dashoffset: 195;
		}
	}

	.text4 {
		stroke: #faa;
		animation: slide4 5s linear infinite;
	}

	@keyframes slide4 {
		0% {
			stroke-dashoffset: -105;
		}

		100% {
			stroke-dashoffset: 230;
		}
	}

	.boot {
		font-size: 16px;
		font-weight: 600;
	}
</style>
